<template>
  <view class="container">
    <view class="detailsBox">
      <!-- 标题 -->
      <view class="titleBox" v-if="article.articleType==1">
        {{article.title}}
      </view>
      <!-- 详情组件 -->
      <view class="article">
        <view class="articleBox">
          <view class="articleBox_top">
            <view class="articleBox_top_left">
              <image :src="article.avatar" mode="widthFix"></image>
              <view class="articleBox_top_left_text">
                <h1>{{article.nickname}}</h1>
                <block>
                  <text v-if="article.userRemarks">{{article.userRemarks}}</text>
                  <text v-else>欢迎来到奇宠社区 ~</text>
                </block>
              </view>
            </view>
            <view v-if="article.createUser != userInfo.id" :class="article.followed?'attention':'attention1'"
              @click="onfollowed(article.createUser,article.followed)">
              {{article.followed?'已关注':'关注'}}
            </view>
          </view>
          <view class="articleBox_button">
            <view class="articleBox_button_title">
              <rich-text v-if="article.postsContent" :nodes="article.postsContent"></rich-text>
            </view>
            <view class="img_box2">
              <block v-for="(item,i) in article.sliderImgs" :key="i">
                <image :src="item" mode="aspectFill" @click="TanPreviewImage(article.sliderImgs,i)"></image>
              </block>
            </view>
          </view>
        </view>
      </view>
      <!-- 标签卡片 -->
      <view v-if="JSON.stringify(article.animal) != '{}'" class="labelBox"
        @click="navigateTo('/subpkg/productdetails/productdetails?id=' + article.animal.id)">
        <view class="label_left">
          <image class="image" :src="article.animal.previewImage" mode="aspectFill"></image>
          <view class="label_font">
            <h1>{{article.animal.productName}}</h1>
            <view class="label_left_text" style="font-size: 22rpx;">
              {{article.animal.categoryName?article.animal.categoryName:''}}<text
                style="margin: 0 12rpx;">|</text>{{article.animal.buyers}}人想买
            </view>
          </view>
        </view>
        <view class="label_right">
          <h1>{{article.animal.score}}</h1>
        </view>
      </view>
      <!-- 浏览人数 -->
      <view class="browseBox">
        <view class="browseBox_left">
          <view class="browseBox_left_text">
            <text>{{article.views?article.views:''}}人浏览</text>
            <text style="margin: 0 12rpx;">·</text>
            <text>{{$util.dateUtils.format(article.updateTime)}}</text>
          </view>

        </view>
        <view class="browseBox_right" v-if="article.likes > 0">
          <block v-if="i < 3" v-for="(item,i) in article.likesAvatars" :key="i">
            <image :src="item" mode="widthFix"></image>
          </block>
          <text class="browseBox_right_text">等{{article.likes}}人赞过</text>
        </view>
      </view>
      <!-- 加入 -->
      <view class="joinBox" @click="navigateTo('/subpkg/petInfo/petInfo?id=' + article.category.id)">
        <view class="joinBox_left">
          <image class="image" :src="article.category.previewImage" mode="aspectFill"></image>
          <view class="joinBox_left_text">
            <h1>{{article.category.categoryName}}</h1>
            <text>{{article.category.joiners}}人加入</text>
          </view>
        </view>
        <view class="joinBox_right">
          进入
        </view>
      </view>
      <!-- 矩形 -->
      <view class="rectangle"></view>
      <!-- 评论 -->
      <view class="commentBox">
        <!-- 评论标题 -->
        <view class="commentBox_title">
          <h1>
            评论
          </h1>
          <!-- <view class="commentBox_title_right">
            <text class="hottest">最热</text>
            <text class="o"> · </text>
            <text class="newest">最新</text>
          </view> -->
        </view>
        <!-- 评论内容 -->
        <view class="commentBox_content">
          <block v-for="(item,i) in reviewList" :key="i">
            <!-- 用户信息 -->
            <view class="user_message">
              <view class="user_message_left" @click="navigateTo('/subpkg/userInfo/userInfo?id=' + item.userId)">
                <image :src="item.avatar" mode="widthFix"></image>
                <view class="user_message_left_text">
                  <h1>{{item.nickname}}</h1>
                  <p>{{item.userRemarks?item.userRemarks:'欢迎来到奇宠日记~'}}</p>
                </view>
              </view>
              <view v-if="!item.isLiked" class="user_message_right" @click="onLiked(item,'comment')">
                <image src="/static/goods.png" mode="widthFix"></image>
              </view>
              <view v-else class="user_message_right" @click="onLiked(item,'comment')">
                <text>{{item.likes}}</text>
                <image src="/static/goods_active.png" mode="widthFix"></image>
              </view>
            </view>
            <!-- 评论内容 -->
            <view class="comment_box">
              <view class="comment_box_content" @longpress="logoTime(item.id,item.userId)">
                <text>{{item.content}}</text>
              </view>
              <view class="reply">
                <text>{{$util.dateUtils.format(item.createTime)}}</text>
                <text class="o"> · </text>
                <text @click="navigateTo('/subpkg/details/commentReply?id=' + item.id)">回复</text>
              </view>
              <!-- 回复内容 -->
              <view class="reply_content" v-if="item.replies > 0"
                @click="navigateTo('/subpkg/details/commentReply?id=' + item.id)">
                <block v-for="(reply,ii) in item.lastComments" :key="ii">
                  <view class="reply_item" v-if="reply.isReply">
                    <h1>{{reply.nickname}} 回复：{{reply.replyUserNickname}}</h1>
                    <text>{{reply.content}}</text>
                  </view>
                  <view class="reply_item" v-else>
                    <h1>{{reply.nickname}}：</h1>
                    <text>{{reply.content}}</text>
                  </view>
                </block>
                <view class="reply_All" @click="">
                  查看全部
                  <text>{{item.replies}}</text>
                  条回复
                </view>
              </view>

              <!--uni-app-->
              <!-- <tui-bubble-popup class="bubbleShow" :show="bubbleShow" radius="30rpx" width="150px" position="absolute"
                :mask="false" left="125px" bottom="30px" borderWidth="0" backgroundColor="#fff"
                color="rgba(61,61,61,1)">
                <view class="bubble_box">
                  <view class="bubble_box_Item" @click="removeShow(conditionItem.id)">
                    <image src="/static/delete.png" mode="widthFix"></image>
                    <text>删除</text>
                  </view>
                </view>
              </tui-bubble-popup> -->
            </view>
          </block>
          <!-- 到底了 -->
          <view class="Whether" v-if="reviewList.length != 0">
            <text>-- 呀呀呀，我要到底了 --</text>
          </view>

          <view class="Myactive_box_no" v-if="reviewList.length == 0">
            <image src="/static/images/mine/yizi.png" mode="aspectFill"></image>
            <text>什么评论都没有～</text>
            <text>快来抢占第一个沙发吧～</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 回复文章框 -->
    <van-popup :show="articleShow" position="bottom" custom-style="height: 25%" @close="articleShowClose">
      <view class="reply_Input">
        <textarea class="reply_l" maxlength="50" placeholder="我也来说两句..." :model:value="content" @input="contentInput">
        </textarea>
        <view class="send" @click="addsubmitText">
          发送
        </view>
      </view>
      <view class="img_and">
        <!-- <image src="/static/picture.png" class="minImage" mode="widthFix"></image> -->
        <!-- <image src="/static/invite.png" mode="widthFix"></image> -->
      </view>
    </van-popup>

    <!--  -->
    <van-popup :show="shareShow" round position="bottom" custom-style="height: 25%" @close="shareShowClose">
      <view class="share_Input">
        <button type="default" open-type="share">
          <image src="/static/images/weixin.png" mode="aspectFill"></image>
          <text>发送给好友</text>
        </button>
        <button type="default" @click="oncircleShow">
          <image src="/static/images/pyquan.png" mode="aspectFill"></image>
          <text>分享到朋友圈</text>
        </button>
      </view>
    </van-popup>

    <view class="circleType">
      <van-popup :show="circleShow" custom-style="height: 10%;width : 40%" @close="circleShowClose">
        <view class="share_Input">
          点击右上角选择可分享朋友圈
        </view>
        <view class="minImage"></view>
      </van-popup>
    </view>

    <!--uni-app-->
    <tui-modal :show="modalShow" :button="button" content="确定删除评论吗？" @click="modalShowClick"></tui-modal>


    <!-- 发表评论 -->
    <view class="publish_Box">
      <view class="publish_Box_left" @click="commentShowInput">
        <text>
          快来发表你的评论吧！
        </text>
      </view>
      <view class="publish_Box_right">
        <view v-if="!article.isLiked" class="publish_Box_right_item" @click="onLiked(article,'article')">
          <image src="/static/give.png" mode="widthFix"></image>
          <text>{{article.likes}}</text>
        </view>
        <view v-else class="publish_Box_right_item" @click="onLiked(article,'article')">
          <image src="/static/give_active.png" mode="widthFix"></image>
          <text>{{article.likes}}</text>
        </view>
      </view>
    </view>

    <view class="share" @click="shareShow = true">
      <image src="/static/Share3.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
  import {
    getattention,
    getLikeed
  } from '@/api/community.js'
  import {
    detail,
    getCommentList,
    commentSubmit,
    removecomment
  } from "@/api/article.js"
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        // 评论框
        articleShow: false,
        // 分享
        shareShow: false,
        // 朋友圈
        circleShow: false,
        value: 123,
        // 回复评论人
        reply_value: '',
        // 评论文章
        article_value: '',
        articleId: '',
        // 评论内容
        content: '',
        article: [],
        current: 1,
        size: 20,
        total: 0,
        sort: 0,
        reviewList: [],
        bubbleShow: false,
        modalShow: false,
        button: [{
            text: "取消",
            type: "white",
            plain: true
          },
          {
            text: "确定删除",
            type: "white",
            plain: true
          }
        ],
        checkcommentId: 0,

        flagadd: true
      };
    },
    onLoad(options) {
      this.articleId = options.id;

      uni.setNavigationBarTitle({
        title: options.name + '详情'
      })
      this.initData();

    },
    // 触底的事件
    onReachBottom() {
      if (this.current * this.size >= this.total) {
        return;
      }
      // 圈子触底
      this.current++;
      this.getComents()
    },
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo'])
    },

    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: "奇宠日记",
        path: '/subpkg/details/details?id=' + this.article.id,
        imageUrl: this.article.sliderImgs[0]
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: "奇宠日记",
        path: '/subpkg/details/details?id=' + this.article.id,
        imageUrl: this.article.sliderImgs[0]
      };
    },
    // #endif
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV == true) {
            this.current = 1;
            this.total = 0;
            this.sort = 0;
            this.reviewList = [];
            // 初始化数据
            this.initData();
          }
        },
        deep: true
      }
    },
    methods: {
      initData() {
        detail(this.articleId).then(res => {
          // if (res.data.animal.sliderImgs.length > 1) {
          // 	console.log("res.data.animal:" + res.data.animal.sliderImgs)
          // 	res.data.animal.sliderImgs = res.data.animal.sliderImgs.split(',');
          // }
          if (res.data.sliderImgs.length > 1) {
            // console.log("res.data:" + res.data.sliderImgs)
            res.data.sliderImgs = res.data.sliderImgs.split(',');
          }
          // res.data.postsContent = res.data.postsContent.split('\n')
          this.article = res.data
		  
		  this.article.postsContent = this.$util.Escape2Html(this.article.postsContent);
		  
		  if(this.article.title && this.article.title.length > 0){
			  uni.setNavigationBarTitle({
			    title: this.article.title
			  })
		  }
		  
        })
        this.getComents()
      },
      // 获取动态下的评论
      getComents() {
        let that = this;
        getCommentList(that.articleId, that.sort, that.current).then(res => {
          if (that.current === 1) {
            that.size = res.data.size;
            that.total = res.data.total;
          }

          res.data.records.forEach(item => {
            if (item.sliderImgs.length > 1) {
              // console.log("res.data.records:" + item.sliderImgs)
              item.sliderImgs = item.sliderImgs.split(',');
            }
          })

          that.reviewList = [...that.reviewList, ...res.data.records];
        })
      },
      // 关注
      onfollowed(createUser, followed) {
        getattention(createUser).then(res => {
          this.article.followed = !this.article.followed
        })
      },
      onLiked(data, type) {
        //0 动态 1 文章 2 点评 4 评论
        getLikeed({
          associatedId: data.id,
          associatedType: type === 'article' ? data.articleType : 4,
          associatedUserId: type === 'article' ? data.createUser : data.userId
        }).then(res => {
          if (type === 'article') {
            this.article.isLiked = !data.isLiked
            if (this.article.isLiked) {
              this.article.likes += 1;
            } else {
              if (this.article.likes <= 0) {
                return
              } else {
                this.article.likes--
              }
            }
          } else {
            this.reviewList.forEach((item) => {
              if (item.id === data.id) {
                item.isLiked = !data.isLiked
                if (item.isLiked) {
                  item.likes += 1;
                } else {
                  if (item.likes <= 0) {
                    return
                  } else {
                    item.likes--;
                  }
                }
              }
            });
          }
        });
      },
      // 导航
      navigateTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 文章发送
      addsubmitText() {
        if (this.flagadd) {
          this.flagadd = false
          if (this.content) {
            const comment = {
              associatedId: this.articleId,
              associatedType: 0,
              commentImgs: '',
              content: this.content,
            }

            commentSubmit(comment).then(res => {
              // console,log(res)
              this.content = ''
              this.articleShow = false
              this.current = 1;
              this.total = 0;
              this.sort = 0;
              this.reviewList = [];
              this.getComents()

              this.flagadd = true
            })
          } else {
            this.$util.Tips({
              title: '请输入内容！'
            })
          }
        }
      },
      // 文章
      contentInput(e) {
        this.content = e.detail.value
      },
      commentShowInput() {
        this.articleShow = true
      },
      shareShowClose() {
        this.shareShow = false
      },
      articleShowClose() {
        this.articleShow = false
      },
      oncircleShow() {
        this.shareShow = false
        this.circleShow = true
      },
      circleShowClose() {
        this.circleShow = false
      },
      //点击图片进入函数，传入当前列表的索引index
      TanPreviewImage(sliderImgs, i) {
        console.log(sliderImgs)
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://21111889:8970/6_1597822634094.png"]
          current: i, //这里是判断到点击列表上的某个图片，就读取索引的图片
          urls: sliderImgs, //这是整个内容的图片数组，放一个数组里，就可以左右切换了
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      logoTime(id, userId) {
        // console.log('触底了')
        if (this.userInfo.id == userId) {
          this.modalShow = true
        }
        this.checkcommentId = id
      },
      modalShowClick(e) {
        if (e.index == 0) {
          this.modalShow = false
        } else {
          this.modalShow = false
          removecomment(this.checkcommentId).then(res => {
            // console.log(res)
            const index = this.reviewList.findIndex(x => x.id == this.checkcommentId)
            // console.log(index)
            this.reviewList.splice(index, 1)
          }).catch(err => {
            this.$util.Tips({
              title: err
            })
          })
        }
      }
    },
  }
</script>

<style lang="scss">
  /deep/ .tui-modal-btn::after {
    border: none !important;
  }

  /deep/ .tui-modal-content {
    font-size: 24px !important;
  }

  .reply_kuang {
    height: 100%;

    /deep/ .van-popup {
      padding: 0 24rpx;
    }
  }

  .articleBox_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 0;

    .articleBox_top_left {
      display: flex;

      image {
        width: 74rpx;
        height: 74rpx;
        border-radius: 50%;
      }

      .articleBox_top_left_text {
        margin-left: 18rpx;

        h1 {
          font-size: 30rpx;
          font-weight: 500;
          color: rgb(61, 61, 61);
        }

        text {
          font-size: 24rpx;
          color: rgba(61, 61, 61, .5);
        }
      }
    }


    .articleBox_top_right {
      width: 128rpx;
      height: 52rpx;
      border-radius: 26.5rpx;
      background-color: rgba(253, 211, 56, .5);
      font-size: 26rpx;
      text-align: center;
      line-height: 52rpx;
      color: rgba(51, 51, 51, .5);

    }

  }

  // 关注
  .attention {
    padding: 0rpx 25rpx;
    // background-color: rgba(253, 211, 56, 0.5);
    border-radius: 26.5rpx;
    color: rgba(51, 51, 51, 0.4) !important;
    font-size: 26rpx;
    text-align: center;
    line-height: 52rpx;
    font-weight: 500;
    border: 2rpx solid rgba(61, 61, 61, 0.4);
  }

  // 未关注
  .attention1 {
    padding: 0rpx 25rpx;
    // background-color: rgba(253, 211, 56, 1);
    border-radius: 26.5rpx;
    color: rgba(51, 51, 51, 1) !important;
    font-size: 26rpx;
    text-align: center;
    line-height: 52rpx;
    font-weight: 500;
    border: 2rpx solid rgba(61, 61, 61, 1);
  }

  .articleBox_button {
    .articleBox_button_title {
      line-height: 52rpx;
      font-size: 28rpx;
    }

    p {
      font-size: 28rpx;
      color: rgb(61, 61, 61);
      line-height: 52rpx;
    }
  }

  .detailsBox {
    padding: 20rpx 24rpx;

    .titleBox {
      font-family: SourceHanSansCN-Bold;
      padding: 20rpx 0;
      font-size: 44rpx;
      font-weight: 700;
    }

    .labelBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160rpx;
      padding: 0 30rpx;
      margin-top: 50rpx;
      // margin-bottom: 45rpx;
      border: 1px solid #F1F1F1;
      border-radius: 20rpx;

      .label_left {
        display: flex;

        .image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }

        .label_font {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 18rpx;
          height: 100rpx;

          .label_font h1 {
            padding-bottom: 5rpx;
          }

          .label_left_text {
            font-size: 28rpx;
            color: #999;
          }
        }
      }

      .label_right {
        color: #FF6034;
        font-size: 48rpx;
        font-weight: 700;
      }
    }

    .browseBox {
      display: flex;
      justify-content: space-between;
      margin-top: 45rpx;

      .browseBox_left {
        display: flex;
        align-items: center;

        .browseBox_left_text {
          font-size: 24rpx;
          color: rgba(61, 61, 61, 0.5);
        }
      }

      .browseBox_right image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10rpx;
      }

      .browseBox_right_text {
        font-size: 24rpx;
        color: rgba(61, 61, 61, .5);
      }
    }

    .joinBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 122rpx;
      border-radius: 10rpx;
      padding: 0 25rpx;
      margin-top: 40rpx;
      margin-bottom: 52rpx;
      background-color: rgba(61, 61, 61, 0.05);

      .joinBox_left {
        display: flex;

        .image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 10rpx;
        }

        .joinBox_left_text {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 25rpx;

          h1 {
            font-size: 26rpx;
            color: rgb(61, 61, 61);
          }

          text {
            font-size: 22rpx;
            color: rgba(61, 61, 61, .5);
          }
        }
      }

      .joinBox_right {
        width: 128rpx;
        height: 52rpx;
        border-radius: 26.5rpx;
        background-color: rgb(253, 211, 56);
        font-size: 26rpx;
        color: rgb(51, 51, 51);
        text-align: center;
        line-height: 52rpx;
        font-weight: 500;

        // text {
        //   text-align: center;

        // }
      }
    }

    .rectangle {
      height: 8rpx;
      background-color: rgb(247, 247, 247);

    }

    .commentBox {
      .commentBox_title {
        display: flex;
        justify-content: space-between;
        padding: 28rpx 0;

        h1 {
          font-size: 36rpx;
          color: rgb(61, 61, 61);
        }

        .commentBox_title_right {
          font-size: 24rpx;

          .o {
            padding: 0 10rpx;
          }

          .hottest {
            color: rgb(61, 61, 61);
          }

          .newest {
            color: rgba(61, 61, 61, 0.5);
          }
        }
      }

      .commentBox_content {
        .user_message {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;

          .user_message_left {
            display: flex;

            .user_message_left_text {
              // display: flex;
              // text-decoration: column;
              // justify-content: space-around;
              margin-left: 12rpx;

              h1 {
                margin-bottom: 6rpx;
                font-size: 30rpx;
                color: rgb(61, 61, 61);
              }

              p {
                font-size: 24rpx;
                color: rgba(61, 61, 61, .5);
              }
            }

            image {
              width: 80rpx !important;
              height: 80rpx !important;
              border-radius: 50%;
            }
          }

          .user_message_right {
            text {
              font-size: 24rpx;
              color: rgb(61, 61, 61);
              margin-right: 6rpx;
            }

            image {
              width: 30rpx;
              height: 26rpx;
              vertical-align: middle;
            }
          }
        }

        .comment_box {
          position: relative;
          margin-left: 90rpx;
          // padding-bottom: 50rpx;
          border-bottom: 1px solid rgba(241, 241, 241, .5);
          margin-bottom: 30rpx;

          .comment_box_content {
            margin: 8rpx 0;

            text {
              font-size: 28rpx;
              color: rgb(61, 61, 61);
              line-height: 1.5;
            }
          }

          .reply {
            margin-bottom: 36rpx;

            text {
              font-size: 24rpx;
              color: rgba(61, 61, 61, .5);
            }

            .o {
              padding: 0 10rpx;
            }
          }

          .reply_content {
            // display: flex;
            // text-decoration: column;
            // justify-content: space-around;
            padding: 15rpx 0;
            padding-left: 27rpx;
            border-radius: 10rpx;
            line-height: 2;
            background-color: rgba(61, 61, 61, 0.05);

            .reply_item {
              display: flex;

              h1,
              text {
                font-size: 26rpx;
                color: rgb(61, 61, 61);
              }

              text {
                color: rgba(61, 61, 61, .5);
              }
            }

            .reply_All {
              font-size: 26rpx;
              color: rgba(61, 61, 61, .5);
            }
          }

        }

        .Whether {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 50rpx;
          margin-bottom: 146rpx;

          text {
            font-size: 22rpx;
            color: rgba(61, 61, 61, .5);
            margin: 8rpx;
          }

          .i {
            width: 15rpx;
            height: 1.5rpx;
            margin: 0 4rpx;
            background-color: rgba(166, 166, 166, .5);
          }

        }

        .Myactive_box_no {
          // height: 300rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 615rpx;
          padding-bottom: 75rpx;

          image {
            width: 235rpx;
            height: 265rpx;
          }

          text {
            color: rgba(61, 61, 61, 0.5);
            font-size: 26rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
  }

  .reoly_All {
    margin-top: 120rpx;

    .no {
      border: none !important;
    }

    .reoly_scroll {
      height: 100%;
      position: absolute;
      button: 0;
      left: 0;


    }

    .reply_title {
      position: absolute;
      top: 25rpx;
      left: 50%;
      transform: translate(-50%);
    }

    .reolyBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .reolyBox_left {
        display: flex;

        .reolyBox_left_text {
          // display: flex;
          // text-decoration: column;
          // justify-content: space-around;
          margin-left: 12rpx;

          h1 {
            margin-bottom: 6rpx;
            font-size: 30rpx;
            color: rgb(61, 61, 61);
          }

          p {
            font-size: 24rpx;
            color: rgba(61, 61, 61, .5);
          }
        }

        image {
          width: 58rpx;
          height: 58rpx;
          border-radius: 50%;
        }
      }

      .reolyBox_right {
        text {
          font-size: 24rpx;
          color: rgb(61, 61, 61);
          margin-right: 6rpx;
        }

        image {
          width: 30rpx;
          height: 26rpx;
          vertical-align: middle;
        }
      }
    }

    .reoly_content {
      margin-left: 70rpx;
      padding-bottom: 50rpx;
      border-bottom: 1px solid rgba(241, 241, 241, .5);

      .reoly_content_text {
        margin: 8rpx 0;

        text {
          font-size: 28rpx;
          color: rgb(61, 61, 61);
          line-height: 1.5;
        }
      }

      .reoly_content_time_text {
        font-size: 24rpx;
        color: rgba(61, 61, 61, .5);
      }

      .reoly_content_time {


        text {
          font-size: 24rpx;
          color: rgba(61, 61, 61, .5);
        }

        .o {
          padding: 0 10rpx;
        }
      }

    }

    .reoly_Item {
      height: 100%;
      position: absolute;
      button: 0;
      left: 0;
      padding: 0 24rpx;
      background-color: rgba(245, 245, 245, .5);

      .reoly_list {
        margin-top: 50rpx;
      }
    }

    .reply_All {
      font-size: 26rpx;
      color: rgba(61, 61, 61, .5);
    }

  }

  /deep/ .reply_Input {
    padding: 28rpx;
    display: flex;
    // justify-content: center;
    justify-content: space-between;
    align-items: center;

    .send {
      width: 10%;
      margin-left: 20rpx;
      font-size: 28rpx;
      padding: 50rpx 0rpx;
      color: rgba(61, 61, 61, .5);
      box-sizing: border-box;
    }
  }

  .img_and {
    display: flex;
    justify-content: flex-end;
    margin-top: 24rpx;
    padding-right: 105rpx;

    image {
      width: 38rpx;
      height: 38rpx;
      // padding-left: 80rpx;
    }

    .minImage {
      margin-right: 65rpx;
    }
  }

  /deep/ .reply_l {
    width: 80%;
    height: 160rpx;
    border-radius: 10rpx;
    padding-top: 18rpx;
    padding-left: 26rpx;
    background-color: rgb(245, 245, 245);
    font-size: 28rpx;
    color: rgba(61, 61, 61, .5);
  }

  .remindBox {
    padding: 0 24rpx;

    .remind_text {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translate(-50%);
      font-size: 30rpx;
      color: rgb(61, 61, 61);
    }

    .remind_list {
      height: 1000rpx;
      margin-top: 88rpx;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      padding: 0 24rpx;


      .remind_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 0rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, .1);

        .remind_item_left {
          display: flex;

          image {
            width: 74rpx;
            height: 74rpx;
            border-radius: 50%;
          }

          .remind_item_left_text {
            margin-left: 18rpx;

            h1 {
              margin-bottom: 6rpx;
              font-size: 30rpx;
              color: rgb(61, 61, 61);
            }

            p {
              font-size: 24rpx;
              color: rgba(61, 61, 61, .5);

              .o {
                padding: 0 15rpx;
              }
            }
          }
        }
      }
    }
  }

  .share_Input {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fff;
      padding: 0 !important;
      // border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 110rpx;
        height: 110rpx;
      }

      text {
        font-size: 32rpx;
      }
    }
  }

  .circleType {
    /deep/ .van-popup--center {
      position: fixed !important;
      top: 7% !important;
      left: 77% !important;
    }

    /deep/ .van-popup {
      border-radius: 6rpx;
    }

    .share_Input {
      font-size: 26rpx;
      padding: 0 24rpx;
      line-height: 50rpx;
    }

    .minImage {
      position: absolute;
      right: 96rpx;
      top: -38rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: transparent transparent #fff transparent;
    }
  }

  .img_box2 {
    image:nth-child(3n) {
      margin-right: 0rpx !important;
    }

    image {
      width: 31%;
      height: 216rpx;
      border-radius: 15rpx;
      margin-top: 24rpx;
      margin-right: 24rpx;
      vertical-align: top;
    }
  }

  .bubble_box {
    padding: 28rpx 38rpx;
    box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.08) !important;
    border-radius: 30rpx;

    .bubble_box_Item:last-child {
      margin-bottom: 0;
    }

    .bubble_box_Item {
      display: flex;
      align-items: center;
      // justify-content: space-around;
      margin-bottom: 33rpx;

      image {
        width: 40rpx;
      }

      text {
        margin-left: 20rpx;
        font-size: 30rpx;
        color: rgba(61, 61, 61, 1);
      }
    }
  }


  .publish_Box {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    height: 108rpx;
    padding: 0 24rpx;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px -8px 17px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: center;
    align-items: center;

    .publish_Box_left {
      padding: 0 30rpx;
      border-radius: 82rpx;
      height: 64rpx;
      width: 100%;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      text {
        font-size: 26rpx;
        color: rgba(61, 61, 61, .5);
      }
    }

    .publish_Box_right {
      display: flex;

      .publish_Box_right_item {
        display: flex;
        // flex-flow: column;
        justify-content: center;
        align-items: center;
        margin: 0 30rpx;

        image {
          width: 38rpx;
          height: 38rpx;
          margin-right: 20rpx;
        }

        text {
          font-size: 26rpx;
          color: rgba(61, 61, 61, .5);
          // margin-top: 5rpx;
        }
      }
    }
  }

  .share {
    position: fixed;
    right: 31rpx;
    bottom: 135rpx;
    width: 126rpx;
    height: 126rpx;
    border-radius: 50%;
    background-color: rgba(252, 210, 56, 1.00);
    image {
      width: 100%;
      height: 100%;
    }
  }
</style>
